<template>
<div>

    <div class="文本框">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="搜索站内资讯、视频或用户"
                        v-model="search"
                        prefix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="文本框"
             style="padding: 40px;">
          <el-tabs v-model="isLogin" ref="tabs">
            <el-tab-pane label="未登录" name="0">
              <div class="文本 居中">
                登录后可以保存您的浏览喜好、评论、收藏，并与APP同步，更可以发布富头条、视频与直播
              </div>
              <br/>
              <div class="居中" >
                <el-button type="primary" style="width:80%;" @click="toLogin">登录</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已登录" name="1">
              <el-row>
                <el-col :span="8"><el-avatar :size="80" :src=useravatar></el-avatar></el-col>
                <el-col :span="16">
                  <div class="文本-标题">{{nickname}} </div>
                  <div class="文本-小-宽间距">{{ userarticleandfuheadlinenumbers }} 文章 {{ uservideonumbers }} 视频</div>
                  <div class="文本-小-宽间距">{{ userthumbups }} 获赞 {{ userfollows }} 关注 {{ userfollowers }} 粉丝</div>
                  <el-button type="text" @click="logout">退出登录</el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="文本框 居中">
          扫码下载富吾app
        </div>
        <div class="文本框">
          <div class="文本-中">
            更多
          </div>
        </div>
        <div class="文本框">
          <div class="文本-中">
            友情链接
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane>
              <span slot="label"
                    class="文本">综合</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">财经</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">银行</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">证券</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">保险</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">基金</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">房屋</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"
                    class="文本">收藏</span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="文本框">
          <div class="文本-中">
            法规公布
          </div>
          <br />
          <div class="文本">
            津ICP备2021000890号-5|广播电视节目制作经营许可证（津）字第1397号|地址：天津市津南区咸水沽镇金才园48号楼底商3-220-108
          </div>
        </div>
</div>
</template>


<style>
.article-content {
  float: left;
  width: 660px;
  margin: 0;
  padding: 0;
}
.h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  color: #222;
}
.article-meta {
  margin: 12px 0 20px;
  font-size: 13px;
}
.original-tag {
  display: inline-block;
  padding: 2px;
  border: 1px solid #999;
  line-height: 12px;
  margin-right: 6px;
  color: #777;
}
.article-action {
  content: "";
  display: table;
  clear: both;
}
.comment-meta {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #657180;
}
.input-area {
}
.comment-list {
  margin-top: 22px;
  border-top: 1px solid #f2f2f2;
  margin: 0;
  margin-top: 0px;
  padding: 0;
  box-sizing: border-box;
}
.comment-item {
  content: "";
  display: table;
  clear: both;
}
.文章标题 {
  font-weight: bold;
  font-size: 16px;
  font-family: "宋体";
}
/*菜单栏*/
.el-menu {
  border-right: 0 !important;
}
.el-menu {
  margin: 2px;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}

.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.加粗 {
  font-weight: bold;
}

.背景 {
  background: #f8f7f7;
}

.页眉 {
  height: 50px;
  background: #ffffff;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色-无间距 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本框-无间距 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本-小 {
  font-size: 12px;
  text-align: left;
}

.文本-小-宽间距 {
  font-size: 12px;
  text-align: left;
  margin-bottom: 5px;
}

.文本 {
  font-size: 14px;
  text-align: left;
}

.文本-中 {
  font-size: 16px;
  text-align: left;
}

.文本-大 {
  font-size: 18px;
  text-align: left;
}

.文本-标题 {
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.文本-主标题 {
  font-size: 22px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

.文本-巨型 {
  font-size: 26px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.居中 {
  text-align: center;
}

.右侧 {
  text-align: right;
}

.卡片 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

.body {
  background: #f8f7f7;
}
.text {
  font-size: 14px;
  text-align: left;
}
.grid-content {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.grid-content-2 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}
.grid-content-carousel {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
}
.text-card {
  font-size: 12px;
  text-align: left;
}
.text-card-big {
  fo、nt-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid-content-card {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

a {
  text-decoration: none;
  color: black;
}
</style>

<script>

import SideBar from './SideBar.vue';
export default {
  components: { SideBar },
  data() {
    return {
      isLogin: '',
      search: '',
      nickname: '',
      useravatar:"",
      userarticleandfuheadlinenumbers:"",
      uservideonumbers:"",
      userthumbups:"",
      userfollows:"",
      userfollowers:"",
      activeName: 0,
      articleData: [
          {
          title: '习近平：用好红色资源，传承好红色基因 把红色江山世世代代传下去',
          address: '新华网',
          comments:'4',
          gaptime: '1'
      }, {
          title: '我党美女特工沈安娜，潜伏蒋介石身边11年，晚年临终前：我暴露了',
          address: '人民网',
          comments:'3',
          gaptime: '2'
      }, {
          title: '“杭州杀妻案”今一审结束将择期宣判，“她嫌他没用”绞碎初恋情，许某当庭后悔流泪',
          address: '路透社',
          comments:'2',
          gaptime: '3'
      }, {
          title: '海子很火的谜诗，写诗那夜他经历了什么少有人知，却捧红一座城市',
          address: '人民网',
          comments:'3',
          gaptime: '2'
      }, {
          title: '印度疫情下的中国媳妇：丈夫失业、婆婆病重，如何度过这至暗时刻印度疫情下的中国媳妇：丈夫失业、婆婆病重，如何度过这至暗时刻',
          address: '路透社',
          comments:'2',
          gaptime: '3'
      }, {
          title: '文章标题二',
          address: '人民网',
          comments:'3',
          gaptime: '2'
      }, {
          title: '文章标题三',
          address: '路透社',
          comments:'2',
          gaptime: '3'
      }, {
          title: '文章标题二',
          address: '人民网',
          comments:'3',
          gaptime: '2'
      }, {
          title: '文章标题三',
          address: '路透社',
          comments:'2',
          gaptime: '3'
      }, {
          title: '文章标题二',
          address: '人民网',
          comments:'3',
          gaptime: '2'
      }, {
          title: '文章标题三',
          address: '路透社',
          comments:'2',
          gaptime: '3'
      }, {
          title: '文章标题四',
          address: 'BBC',
          comments:'1',
          gaptime: '4'
      }],
      queryByUserId:{
        idUser: window.sessionStorage.getItem("idUser")
      },
    }
  },
  created() {
    this.init()
  },
  methods:{
    toLogin(){
      this.$router.push("/Login");
    },
    logout() {
      window.sessionStorage.removeItem('idUser');
      this.init()
    },
    async init(){
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display="none";
      })
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display="none";
      })
      const token = window.sessionStorage.getItem("idUser");
      if(!token) {
        this.isLogin='0';
      }
      else {
        this.isLogin='1';
        const {data: res} = await this.$http.get('http://39.102.76.217:8082/getuserbasicinfobyid', {
          params:this.queryByUserId
        })
        this.nickname=res.nickname
        this.useravatar=res.useravatar
        this.userarticleandfuheadlinenumbers=res.userarticleandfuheadlinenumbers
        this.uservideonumbers=res.uservideonumbers
        this.userthumbups=res.userthumbups
        this.userfollows=res.userfollows
        this.userfollowers=res.userfollowers

      }
    }
  }

}

</script>
